<template>
  <div class="banner_contain">
    <img
      v-for="(item, index) in imgList"
      :key="index"
      :src="item"
      alt
      v-show="activeIndex === index"
    />
    <ul class="banner_dots">
      <li v-for="(item, i) in imgList" :class="{active:activeIndex ===i}" @click="activeIndex = i" :key="i"></li>
    </ul>
    <div class="left_title" v-show="true">
      <div class="left_t_name">雅思课程</div>
      <ul class="left_t_con">
        <li class="left_t_item">雅思基础</li>
        <li class="left_t_item">雅思基础</li>
        <li class="left_t_item">雅思基础</li>
      </ul>
      <div class="left_t_name">雅思课程</div>
      <ul class="left_t_con">
        <li class="left_t_item">雅思基础</li>
        <li class="left_t_item">雅思基础</li>
        <li class="left_t_item">雅思基础</li>
      </ul>
      <div class="left_t_name">雅思课程</div>
      <ul class="left_t_con">
        <li class="left_t_item">雅思基础</li>
        <li class="left_t_item">雅思基础</li>
        <li class="left_t_item">雅思基础</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      imgList: [
        require("../assets/image/515114142.jpg"),
        require("../assets/image/2211229523.jpg"),
        require("../assets/image/5145123124.jpg"),
        require("../assets/image/5151037788.jpg"),
        require("../assets/image/5151237261.jpg"),
        require("../assets/image/22111928999.jpg"),
        require("../assets/image/22112125217.jpg")
      ]
    };
  },
  mounted() {
    setInterval(() => {
      if (++this.activeIndex === this.imgList.length) {
        this.activeIndex = 0;
      }
    }, 2000);
  }
};
</script>

<style>
.left_title {
  width: 200px;
  position: absolute;
  left: 390px;
  top: 0px;
  z-index: 24;
}

 
.left_title > .left_t_name {
  background: #4da4c5;
  color: #fff;
  font-size: 22px;
  height: 48px;
  line-height: 48px;
  border-bottom: 2px solid #fff;
}

.left_title > .left_t_con > .left_t_item {
  height: 40px;
  line-height: 40px;
  background: #89bdf8;
  color: #474747;
  border: 1px solid #2181f0;
}

.banner_contain {
  position: relative;
}
.banner_dots {
  width: 200px;
  height: 12px;
  display: flex;
  position: absolute;
  left: calc(50% - 100px);
  bottom: 20px;
  justify-content: space-between;
}

.banner_dots li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}
.banner_dots li.active {
  background: orangered;
  width: 25px;
  border-radius: 40%;
}
</style>